<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评分系统</title>
    <style>
        html,
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
        }
        
        li {
            float: left;
            margin-right: 20px;
            list-style-type: none;
        }
        
        #scoreTest {
            font-size: 16px;
            color: #d36822;
        }
        
        .clearfix::after {
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
            content: '';
        }
    </style>
</head>

<body>
    <div>
        <p>总体评分:</p>
        <ul class="clearfix">
            <li><img src="./img/1.png" alt=""></li>
            <li><img src="./img/1.png" alt=""></li>
            <li><img src="./img/1.png" alt=""></li>
            <li><img src="./img/1.png" alt=""></li>
            <li><img src="./img/1.png" alt=""></li>
            <p id="scoreTest"></p>
        </ul>
    </div>
</body>
<script>
    var oUl = document.getElementsByTagName('ul')[0];
    var aImg = document.getElementsByTagName('img');
    var scoreTest = document.getElementById('scoreTest');
    var score = -1;
    var fnBind = function(oImg) {
        oImg.onmouseenter = function() {
            fnHidden();
            fnShow(this.index);
            fnTest(this.index);
        }

        oImg.onclick = function() {
            score = this.index;
            fnHidden();
            fnShow(score);
            fnTest(score);
        }
    }

    oUl.onmouseleave = function() {
        fnHidden();
        fnShow(score);
        fnTest(score);
    }

    var fnTest = function(index) {
        switch (index) {
            case -1:
                scoreTest.innerHTML = '';
                break;
            case 0:
                scoreTest.innerHTML = '很差';
                break;
            case 1:
                scoreTest.innerHTML = '较差';
                break;
            case 2:
                scoreTest.innerHTML = '还行';
                break;
            case 3:
                scoreTest.innerHTML = '推荐';
                break;
            case 4:
                scoreTest.innerHTML = '力荐';
                break;
            default:
                break;
        }
    }

    var fnHidden = function() {
        for (var i = 0; i < aImg.length; i++) {
            aImg[i].src = "./img/1.png";
        }
    }

    var fnShow = function(index) {
        if (index < 2) {
            for (var i = 0; i <= index; i++) {
                aImg[i].src = "./img/2.png"
            }
        } else {
            for (var i = 0; i <= index; i++) {
                aImg[i].src = "./img/3.png"
            }
        }
    }

    for (var i = 0; i < aImg.length; i++) {
        aImg[i].index = i;
        fnBind(aImg[i]);
    }
</script>

</html>